<template>
  <table border="0">
    <thead class="thead">
      <tr>
        <td v-for="item in headers">{{ item }}</td>
      </tr>
    </thead>
    <tbody
      :style="{
        height: height + 'px',
        overflow: 'auto',
      }"
      @mouseenter="stopRotation"
      @mouseleave="startRotation"
      class="tbody"
    >
      <tr v-for="item in tableData">
        <td v-for="ele in propsData">
          <slot :name="ele" :row="item">
            {{ item[ele] }}
          </slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script setup>
import { defineExpose, ref, defineProps } from "vue";

import Card from "./Card.vue";
const props = defineProps({
  headers: {
    type: Array,
    default: () => [],
  },
  propsData: {
    type: Array,
    default: () => [],
  },

  height: {
    type: String,
    default: "200",
  },
  title: String,
});
const tableData = ref([]);
const setData = (data) => {
  tableData.value = data;
};

defineExpose({
  setData,
});
</script>
<style lang="scss" scoped>
.leftuppercontainer {
  overflow: auto;
}
table {
  text-align: center;
  color: #000;
  white-space: nowrap;
  border-collapse: collapse;
  border-spacing: 0;
}

table tbody {
  display: block;
  font-size: 12px;
}
.thead {
  background: rgba(0, 0, 0, 0.2);
  height: 33px;
  line-height: 33px;
  color: #000;
  font-weight: 800;
}

.tbody {
  tr {
    height: 33px;
    line-height: 33px;
  }
  tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.2);
  }
}
table thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

table tbody tr td {
  width: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.color-font {
  color: #ffc916;
}

table thead {
  font-size: 12px;
}
</style>
